Das Box-Modell

Alle Elemente auf Webseiten bestehen aus rechteckigen Kästchen oder auch Boxen. Dank solcher rechteckiger Boxen wird es erst möglich, Elemente mit CSS zu positionieren oder das Layout von Webseiten zu erstellen. Im folgenden Beispiel sind alle Boxelemente mit Hilfe des Universalselektors (*) mit einem schwarzen Rahmen versehen:

See the Pen ff9f20ed3aca6c47e4a8939543fe973f by Bernd Schiller (@Bernie14153) on CodePen.

Das klassische Box-Modell von CSS

Auf den ersten Blick besteht eine derartige Box nur aus einer Höhe und einer Breite. Aber zum Boxmodell gehören:

• der eigentliche Inhaltsbereich für Text und Bilder, der mit width (für die Breite) und height (für die Höhe) vorgegeben wird.
• der Innenabstand (Polsterung), der mit padding angegeben wird
• der Rahmen, der mit border notiert wird
• der Außenabstand, der mit margin vorgegeben wird.

Somit setzt sich eine Box aus insgesamt vier Boxen zusammen: einer Contentbox für den Inhalt, einer Paddingbox für die Polsterung, einer Borderbox für den Rahmen und einer Marginbox für den Rahmenabstand. Diese vier Teileinheiten spielen im neuen Box-Modell von CSS3 eine wichtige Rolle. Jede dieser vier Boxen wiederum kann in top (oben), right (rechts), left (links) und bottom (unten) aufgeteilt werden.

Die verschiedene Interpretation der Boxelemente durch unterschiedliche Browser ist eine verbreitete Fehlerquelle bei der Gestaltung des Layouts in einer Webseite.

width und height

Der eigentliche Inhaltsbereich mit der Fläche für Text und Bilder kann mit den CSS-Eigenschaften width und height festgelegt werden. Gibt man keine speziellen Wert für width an, dann ist das HTML-Element so breit wie das umgebende Element. Wenn keine Angabe zu height gemacht wird, werden alle Elemente so hoch, wie der Inhalt eben ist. Wenn der Inhalt des umfassenden Elements größer ist als die vorgesehene Höhe, wird der Inhalt trotzdem angezeigt und überfließt die Box. Abhilfe schafft die CSS-Eigenschaft overflow (s.u.).

See the Pen f83a0b3d10b848d819546742e20c246d by Bernd Schiller (@Bernie14153) on CodePen.

padding

Padding (Innenabstand, englisch: Polsterung) ist ein erzwungener Leerraum zwischen dem Inhalt eines Elements und seinem eigenen Elementrand, also z.B. zwischen dem Text eines Elements und dem Rand dieses Elements. Sinnvoll ist die padding-Eigenschaft für alle HTML-Elemente, die einen eigenen Absatz erzeugen bzw. einen Block bilden, also etwa für h[1-6], p, blockquote, div oder pre. Sinnvoll sind die Angaben zum Innenabstand ferner, wenn außerdem CSS-Eigenschaften für Rahmen oder für Farben oder Grafiken zum Hintergrund eines Elements notiert werden. Denn erst dann werden die Abstände zwischen Elementgrenze und Elementinhalt richtig sichtbar.
Mit padding kann der Abstand für oben (padding-top), rechts (padding-right), unten (padding-bottom) und links (padding-left) bestimmt werden. Erlaubt sind ein bis vier nicht negative numerische Längenmaße.

• Eine Angabe: für alle 4 Abstände gilt derselbe Wert
• Zwei Angaben: 1. Wert für padding-top und padding-bottom, 2. Wert für padding-left und padding-right
• Drei Angaben: 1. Wert für padding-top, 2. Wert für padding-left und padding-right, 3. Wert für padding-bottom
• Vier Angaben: 1. Wert für padding-top, 2. Wert für padding-right, 3. Wert für padding-bottom, 4. Wert für padding-left (Merkhilfe: Uhrzeigerbewegung)

Achtung: Die Werte werden durch Leerzeichen, nicht durch Kommata getrennt, z.B. padding: 10px 5px

border

Die border-Eigenschaft legt den kompletten Rahmen eines Elementes fest und ist eine Kurzform für border-color, border-style und border-width. Die Werte der drei Eigenschaften können in beliebiger Reihenfolge angegeben werden. Unterschiedliche Einstellungen für den oberen, unteren, linken und rechten Rahmen können nur unter den Kurzformen border-bottom, border-top, border-left und border-right festgelegt werden. Mit der Eigenschaft border-style kann man verschiedene Schmuckrahmen definieren.

See the Pen 28ae5cbf3a8355ec9550ed059c6d71fe by Bernd Schiller (@Bernie14153) on CodePen.

margin

Außenrand oder -abstand (margin) ist ein erzwungener Leerraum zwischen dem aktuellen Element und seinem Eltern- bzw. seinen Nachbarelementen. Für ein p-Element, das direkt innerhalb des body-Elements notiert ist, kennzeichnen Angaben zu linkem und rechtem Außenrand seinen Abstand zu den Elementgrenzen des body-Elements. Wenn mehrere solcher Absätze aufeinander folgen, markieren Angaben zum Außenrand oben und unten den Abstand zwischen den Absätzen.

See the Pen 770893850cc65188ba3e346d21262246 by Bernd Schiller (@Bernie14153) on CodePen.